import React, { useContext } from 'react'
import { Table, Button, Row, Col } from 'antd'
import { useRecoilValue } from 'recoil'
import moment from 'moment'
import { usetApplyForAuditContext } from '../../../context'
import IconSvg from '@/components/IconSvg'
// import style from './style.module.less'
import { dictValuesSelector } from '@/store/dicts'

export default () => {
  // 字典
  const dictValuesGet = useRecoilValue(dictValuesSelector)

  // 一个展示状态的工具 md
  const unreviewed = (
    <div style={{ width: 60, height: 24, backgroundColor: '#FFF5EB', color: '#F8B972' }}>
      <span>待审核</span>
    </div>
  )
  const pass = (
    <div style={{ width: 60, height: 24, backgroundColor: '#EFFDFA', color: '#51BCA5' }}>
      <span>已通过</span>
    </div>
  )
  const turnDown = (
    <div style={{ width: 60, height: 24, backgroundColor: '#FFF1F2', color: '#EB5F62' }}>
      <span>已驳回</span>
    </div>
  )

  const { applyForBottomConfig } = useContext(usetApplyForAuditContext)
  const columns: any = [
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   key: 'index',
    //   width: 60,
    //   align: 'center',
    //   render: (value: any, record: any, index: number) => index + 1,
    // },
    {
      title: '医院编码',
      dataIndex: 'hospitalCode',
      key: 'hospitalCode',
      width: 100,
      align: 'center',
    },
    {
      title: '医院名称',
      dataIndex: 'hospitalName',
      key: 'hospitalName',
      width: 160,
      align: 'center',
    },
    {
      title: '医院等级',
      dataIndex: 'gradingAndGrading',
      key: 'gradingAndGrading',
      width: 128,
      align: 'center',
      // render: (value: string) => {
      //   const findRank = dictValuesGet.hospital_level?.find((item: any) => item.value === value)
      //   return <span>{findRank.label}</span>
      // },
    },
    {
      title: '所属地区',
      dataIndex: 'hospitalAreaFilterFont',
      key: 'hospitalAreaFilterFont',
      width: 180,
      align: 'center',
      render: (value: string) => {
        // 这里转过来是文字，大意了没有闪
        let tranitionFont = value.substring(0, value.length - 1)
        // 匹配市级管理员没有省id为null的结果
        tranitionFont = tranitionFont.replace(/null/g, '')
        // 然后把第一个 / 删除，重新进行拼接展示
        if (tranitionFont.charAt(0) === '/') {
          tranitionFont = tranitionFont.substring(1)
        }
        return <span>{tranitionFont}</span>
      },
    },
    {
      title: '申请人',
      dataIndex: 'fillChargePeople',
      key: 'fillChargePeople',
      width: 120,
      align: 'center',
    },
    {
      title: '申请时间',
      dataIndex: 'createDate',
      key: 'createDate',
      width: 200,
      align: 'center',
      render: (value: string) => <span>{moment(value).format('YYYY-MM-DD  HH : mm : ss')}</span>,
    },
    {
      title: '处理意见',
      dataIndex: 'auditStatus',
      key: 'auditStatus',
      width: 120,
      align: 'center',
      render: (value: any) => {
        // 这里判断一下它是什么状态
        if (value === '1') {
          return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{unreviewed}</div>
        }
        if (value === '2') {
          return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{pass}</div>
        }
        if (value === '3') {
          return <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{turnDown}</div>
        }
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      align: 'center',
      fixed: 'right',
      render: (value: any, record: any) => (
        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
          {record.auditStatus === '1' && (
            <Button type='link' onClick={() => applyForBottomConfig.applyForRouterPush(record)}>
              <IconSvg name='applyFor' style={{ marginRight: 5 }} />
              审核
            </Button>
          )}
          {record.auditStatus !== '1' && (
            <Button type='link' onClick={() => applyForBottomConfig.applyForRouterPush(record)}>
              <IconSvg name='cityExamine' style={{ marginRight: 5 }} />
              查看
            </Button>
          )}
        </div>
      ),
    },
  ]
  return (
    <div>
      <div>
        <Table
          rowKey='id'
          scroll={{ x: 'max-content', y: 'calc(100vh - 340px)' }}
          columns={columns}
          dataSource={applyForBottomConfig.applyForTableData}
          rowSelection={applyForBottomConfig.rowSelection}
          pagination={{
            position: ['bottomRight'],
            total: applyForBottomConfig.paging.totalCount,
            onChange: (page: any, pageSize: any) => {
              applyForBottomConfig.changePagingUploadTable(page, pageSize)
            },
            showTotal: (total: number) =>
              `共 ${total} 条记录  第 ${applyForBottomConfig.paging.pageIndex} / ${Math.ceil(
                total / applyForBottomConfig.paging.pageSize,
              )}页`,
            current: applyForBottomConfig.paging.pageIndex,
            pageSize: applyForBottomConfig.paging.pageSize,
            showSizeChanger: true,
          }}
        />
      </div>
    </div>
  )
}
